<!DOCTYPE html>
<html lang="en">

<head>
  <title>五十音图随机出现</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tips {
      width: 100%;
      font-size: 12px;
      color: #666;
      position: absolute;
      text-align: center;
    }

    #content {
      width: 100%;
      height: 100vh;
      line-height: 100vh;
      text-align: center;
      font-size: 100px;
      font-weight: bold;
    }
    /*深色*/
@media (prefers-color-scheme: dark) {
body {
background: rgb(53, 54, 58);
color: rgba(238,238,238,1);
}
}

/*浅色*/
@media (prefers-color-scheme: light) {
body {
background: rgb(255,255,255);
color: rgba(51,51,51,1);
}
}
  </style>
</head>

<body>
  <p class="tips">按空格键（手机点击屏幕） 开始复习！<a href="fifty-tone.png">全部五十音图</a></p>
  <div id="content"></div>
  <p>
    <!-- <button id="start">学习</button> -->
    <!-- <button id="end">点名结束</button> -->
  </p>
</body>
<script>
  // const box = document.querySelector('div');
  const box = document.getElementById('content');
  // 平假名 清音
  const normal1 = [
    'あ', 'い', 'う', 'え', 'お',
    'か', 'き', 'く', 'け', 'こ',
    'さ', 'し', 'す', 'せ', 'そ',
    'た', 'ち', 'つ', 'て', 'と',
    'な', 'に', 'ぬ', 'ね', 'の',
    'は', 'ひ', 'ふ', 'へ', 'ほ',
    'ま', 'み', 'む', 'め', 'も',
    'や', 'ゆ', 'よ',
    'わ', 'を', 'ん'
  ];
  // 片假名 清音
  const feature1 = [
    'ア', 'イ', 'ウ', 'エ', 'オ',
    'カ', 'キ', 'ク', 'ケ', 'コ',
    'サ', 'シ', 'ス', 'セ', 'ソ',
    'タ', 'チ', 'ツ', 'テ', 'ト',
    'ナ', 'ニ', 'ヌ', 'ネ', 'ノ',
    'ハ', 'ヒ', 'フ', 'ヘ', 'ホ',
    'マ', 'ミ', 'ム', 'メ', 'モ',
    'ヤ', 'ユ', 'ヨ',
    'ワ', 'ヲ', 'ン'
  ]
  // 浊音
  const dullness = [
    'が', 'ぎ', 'ぐ', 'げ', 'ご',
    'ざ', 'じ', 'ず', 'ぜ', 'ぞ',
    'だ', 'ぢ', 'づ', 'で', 'ど',
    'ば', 'び', 'ぶ', 'べ', 'ぼ',
    //　片假名
    'ガ', 'ギ', 'グ', 'ゲ', 'ゴ',
    'ザ', 'ジ', 'ズ', 'ゼ', 'ゾ',
    'ダ', 'ヂ', 'ヅ', 'デ', 'ド',
    'バ', 'ビ', 'ブ', 'ベ', 'ボ',
  ]
  // 半浊音
  const halfVoice = [
    'ぱ', 'ぴ', 'ぷ', 'ぺ', 'ぽ',
    'パ', 'ピ', 'プ', 'パ', 'ポ'
  ]
  // 拗音
  const obstinateTone = [
    'きゃ', 'きゅ', 'きょ', 'キャ', 'キュ', 'キョ',
    'ぎゃ', 'ぎゅ', 'ぎょ', 'ギャ', 'ギュ', 'ギョ',
    'しゃ', 'しゅ', 'しょ', 'シャ', 'シュ', 'ショ',
    'じゃ', 'じゅ', 'じょ', 'ジャ', 'ジュ', 'ジョ',
    'ちゃ', 'ちゅ', 'ちょ', 'チャ', 'チュ', 'チョ',
    'にゃ', 'にゅ', 'にょ', 'ニャ', 'ニュ', 'ニョ',
    'ひゃ', 'ひゅ', 'ひょ', 'ヒャ', 'ヒュ', 'ヒョ',
    'びゃ', 'びゅ', 'びょ', 'ビャ', 'ビュ', 'ビョ',
    'ぴゃ', 'ぴゅ', 'ぴょ', 'ピャ', 'ピュ', 'ピョ',
    'みゃ', 'みゅ', 'みょ', 'ミャ', 'ミュ', 'ミョ',
    'りゃ', 'りゅ', 'りょ', 'リャ', 'リュ', 'リョ',
  ]

  const arr = [...normal1, ...feature1, ...dullness, ...halfVoice, ...obstinateTone];
  // tap事件
  function tap(ele, callback) {
    // 记录开始时间
    var startTime = 0,
      // 控制允许延迟的时间
      delayTime = 200,
      // 记录是否移动，如果移动，则不触发tap事件
      isMove = false;

    // 在touchstart时记录开始的时间
    ele.addEventListener('touchstart', function (e) {
      startTime = Date.now();
    });

    // 如果touchmove事件被触发，则isMove为true
    ele.addEventListener('touchmove', function (e) {
      isMove = true;
    });

    // 如果touchmove事件触发或者中间时间超过了延迟时间，则返回，否则，调用回调函数。
    ele.addEventListener('touchend', function (e) {
      if (isMove || (Date.now() - startTime > delayTime)) {
        return;
      } else {
        callback(e);
      }
    })
  }
  // 生成随机名字
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  function keyDown(e) {
    let event = e || window.event;
    // 空格键按下
    if (event.keyCode === 32) {
      let random = getRandom(0, arr.length - 1);
      box.innerHTML = arr[random];
    }
  }
  document.onkeydown = keyDown;
  tap(document.body,function(){
    let random = getRandom(0, arr.length - 1);
    box.innerHTML = arr[random];
  })
  // 获取元素
  // const btn_start = document.querySelector('#start');
  // const btn_end = document.querySelector('#end');
  // 点击
  // btn_start.addEventListener('click', function () {
  //   let random = getRandom(0, arr.length - 1);
  //   box.innerHTML = arr[random];
  // })
  // let timer;
  // 开始
  // btn_start.addEventListener('click', function () {
      //防止多点
      // clearInterval(timer)
      // timer=setInterval(()=>{
      //     let random = getRandom(0, arr.length - 1);
      //     box.innerHTML = arr[random];
      // },50)
  // })
  // 结束
  // btn_end.addEventListener('click', function () {
  //     clearInterval(timer)
  // })
</script>

</html>